<script setup>
import '../assets/font/iconfont.css'
import router from "@/router/index.js";
import {useGameStore} from '@/stores/game'
import {selectAllPage} from '@/request/game/game.js'
import {onMounted} from "vue";

const gameStore = useGameStore()

onMounted(()=>{
  const data=selectAllPage()
  console.log(data)
})

function jc() {
  router.push("/jc")
}

function js() {
  router.push("/js")
}

function start() {
  let randomNum = Math.floor(Math.random() * gameStore.game.length)
  console.log(randomNum)
  router.push({
    path: '/start',
    query: {
      id: gameStore.game[randomNum].id,
    }
  })
}

function my() {
  router.push("/my")
}

function fl() {
  router.push("/fl")
}

function jl() {
  router.push("/jl")
}

function layout() {
  router.back()
}

</script>

<template>
  <!-- 头部 -->
  <header class="page-header">
    <a href="#">
      <!--<img style="height: 30px;width: 50px" src="../assets/bg2.jpeg" alt="logo">-->
      <el-button type="danger" @click="layout()">退出登录</el-button>
    </a>
    <ul class="header-nav">
      <!--<li><a>新手指引</a></li>-->
      <li><a @click="my">我的</a></li>
    </ul>
  </header>
  <!-- 内容区 -->
  <div class="page-content">
    <div class="content-nav">
      <div class="item" @click="js">
        <i class="iconfont" style="font-size: 40px"> &#xe72f; </i>
        <span>算法介绍</span>
      </div>
      <div class="item" @click="start">
        <i class="iconfont" style="font-size: 40px"> &#xe625; </i>
        <span>开始游戏</span>
      </div>
      <div class="item" @click="fl">
        <i class="iconfont" style="font-size: 40px"> &#xe62f; </i>
        <span>题型分类</span>
      </div>
      <!--<div class="item" @click="jl">
        <i class="iconfont" style="font-size: 40px"> &#xe6f3; </i>
        <span>错题记录</span>
      </div>-->
    </div>
  </div>
</template>

<style scoped>
.page-content {
  background-image: url('../assets/bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

* {
  font-family: Arial;
  font-size: 14px;
  margin: 0;
  padding: 0;
  border: none;
}

a {
  text-decoration: none;
}

ul {
  list-style: none;
}

html, body {
  width: 100%;
  height: 100%;
}

.page-header {
  height: 70px;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.header-nav {
  display: flex;

}

.header-nav li a {
  color: white;
  font-size: 20px;
  border: 1px solid white;
  border-radius: 8px;
  padding: 10px;
  margin-right: 20px;
}

.header-nav li:last-child a {
  margin-right: 0;
}

.page-content {
  display: flex;
  height: calc(100vh - 70px);
}

.content-nav {
  width: 1000px;
  height: 300px;
  margin: auto;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.content-nav .item {
  width: 180px;
  height: 200px;
  background-color: orange;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  transition: 0.2s linear;
  cursor: pointer;
}

.content-nav .item:hover {
  box-shadow: 0px 0px 20px black;
}

.content-nav .item span {
  font-size: 20px;
  color: white;
}

.content-nav .item:nth-child(1) {
  background-color: #595CA8;
}

.content-nav .item:nth-child(2) {
  background-color: #FF9D2E;
}

.content-nav .item:nth-child(3) {
  background-color: #01A6DE;
}

.content-nav .item:nth-child(4) {
  background-color: #015E91;
}

.content-nav .item:nth-child(5) {
  background-color: #1DC128;
}
</style>